<template>

    <div>

        <div style="width: 100%;overflow: hidden">
            <div class="pure_top">
                <div style="position: absolute;top: 20px; left: 10%;">
                    <img :src="avatar" class="avatar">
                    <div style="display: inline-block;margin-left: 20px;">
                        <span style="color: #fff;">{{nickname}}</span>
                        <p></p>
                        <span style="color: #fff;margin-top: 10px;" href="javascript:;">{{mobile_number}}</span style="color: #fff;margin-top: 10px;" href="javascript:;">
                        <a style="color: #00a0e9;margin-top: 10px;" href="/signup">修改手机号</a>
                    </div>

                </div>

                <div class="gold_card">
                    <span style="position: absolute;left: 10%;top: 30%;color: #A25F32;font-weight: bold">已提佣金：{{withdraw_fee}}</span>
                    <span style="position:absolute; right: 10%;top: 30%;color: #A25F32;font-weight: bold">累计佣金：{{grand_total_fee}}</span>
                </div>
            </div>
        </div>


        <div class="row card center-entry">
            <div class="col-xs-3" style="padding:0;">
                <a href="/promote">
                    <div class="round-button">
                        <img src="../../assets/img/promote.jpg">
                    </div>
                    <p>推广名片</p>
                </a>
            </div>
            <div class="col-xs-3" style="padding:0;">
                <a href="/collect-setting">
                    <div class="round-button">
                        <img src="../../assets/img/redbag.jpg">
                    </div>
                    <p>收款管理</p>
                </a>
            </div>
            <div class="col-xs-3" style="padding:0;">
                <a href="/member">
                    <div class="round-button">
<!--                        <img src="https://qianchuzihua.oss-cn-beijing.aliyuncs.com/img/members.jpg">-->
                        <img src="../../assets/img/members.jpg">
                    </div>
                    <p>我的粉丝</p>
                </a>
            </div>
            <div class="col-xs-3" style="padding:0;">
                <a href="/address">
                    <div class="round-button">
                        <img src="../../assets/img/location.jpg">
                    </div>
                    <p>我的地址</p>
                </a>
            </div>
        </div>

        <div class="card" style="height: 400px">
            <div class="card-item">
                <div class="row">
                    <div style="float: left;margin-left: 20px;"><img style="vertical-align: top" src="../../assets/img/orderlist.jpg"></div>
                    <div class="col-xs-10"><a style="display: block" href="/member-order">粉丝订单</a></div>
                    <div style="position:absolute;right: 10px"><img src="../../assets/img/right.png"></div>
                </div>
            </div>
            <div class="card-item">
                <div class="row">
                    <div style="float: left;margin-left: 20px;"><img style="vertical-align: top"  src="../../assets/img/moneybag.jpg"></div>
                    <div class="col-xs-10"><a style="display: block" href="/wallet">钱包</a></div>
                    <div style="position:absolute;right: 10px"><img src="../../assets/img/right.png"></div>
                </div>
            </div>
            <div class="card-item">
                <div class="row">
                    <div style="float: left;margin-left: 20px;"><img style="vertical-align: top"  src="../../assets/img/coupon.jpg"></div>
                    <div class="col-xs-10"><a @click="test()" style="display: block" href="javascript:;">我的代金券</a></div>
                    <div style="position:absolute;right: 10px"><img src="../../assets/img/right.png"></div>
                </div>
            </div>
            <div class="card-item">
                <div class="row">
                    <div style="float: left;margin-left: 20px;"><img style="vertical-align: top"  src="../../assets/img/lock.jpg"></div>
                    <div class="col-xs-10"><a style="display: block" href="/password">修改密码</a></div>
                    <div style="position:absolute;right: 10px"><img src="../../assets/img/right.png"></div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import swal from "sweetalert";

    export default {
        data() {
            return {
                avatar: '',
                nickname: '',
                mobile_number: '',
                withdraw_fee: '￥',
                grand_total_fee: '￥',
            }
        },
        created() {
            // $('body').css('background-color', 'rgb(249,249,249)');
        },
        mounted() {
            this.getUserInfo();
        },
        methods: {
            getUserInfo() {
                let that = this;
                this.api.center().then(res => {
                    if (res) {
                        that.avatar = res.data.avatar;
                        that.nickname = res.data.nickname;
                        that.withdraw_fee = res.data.withdraw_fee;
                        that.grand_total_fee = res.data.grand_total_fee;
                        if (res.data.mobile_number != null) {
                            that.mobile_number = res.data.mobile_number
                        }
                    }
                });
            },
            test() {
                swal("暂未开放");
            }
        },
    }
</script>
<style>

    .pure_top {
        content: '';
        width: 160%;
        height: 200px;
        /*position: absolute;*/
        /*left: -20%;*/
        /*top: 0;*/
        margin-left: -30%;
        border-radius: 0 0 50% 50%;
        background: rgb(78, 78, 78);
        overflow: hidden;
        /*border-bottom: 1px solid rgb(255, 227, 198);*/
    }


    .gold_card {
        position: relative;
        margin-top: 120px;
        width: 60%;
        margin-left: 20%;
        border-radius: 10px;
        height: 80px;
        background: radial-gradient(circle at 12.5% 25%, rgb(255, 227, 198), rgb(214, 168, 117));
    }

    .avatar {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        z-index: 99;
        vertical-align: top;
    }

    .card {
        border-radius: 5px;
        background-color: white;
        margin: 10px;
    }

    .center-entry {
        text-align: center;
    }

    .round-button {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        box-shadow: 0 3px 3px 2px #eeeeee;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .center-entry a {
        display: inline-block;
        text-decoration: none;
        color: #A25F32;
    }

    .center-entry img {
        width: 100%;
        padding: 10px;
    }


    .card-item {
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px solid #FAFAFA;
        position: relative;
    }

    .card-item a {
        line-height: 20px;
        color: black;
    }

    .card-item img {
        width: 20px;
    }


</style>
